<template>
	<view class="bgIndex " :style="{ '--bg-image': `url(${daziBg1})` }">
		<scroll-list ref="list" @load="load" @refresh="refresh">
		<!-- <view :style="{ height: heightSystemss*2 + 'rpx' }"></view> -->
		<view class="padding_20rpx">
			<!-- 		<sunui-navbar v-if="tabList.length>=1" :items="tabList" lineHeight="70rpx" :isCenter="false"
				:currentIndex="currentIndex" padding="12rpx" activeColor="#000000" :size="65" activeLineBg="#785DF6"
				textAlign="center" activeLineWidth="100%" activeDirection="space-between" activeLineHeight="6rpx"
				bgColor="transparent" :margin="10" @change="e=>getChange(e,tabList[e].id)"></sunui-navbar> -->
			<!-- 搜索框 -->
			<view class="search-content">
				<image class="address-img" :src="dw" mode=""></image>
				<text>{{userInfo.city_name}}</text>
				<text style="margin-left: 20rpx;color:rgb(224 218 218);">|</text>
				<image class="search-img" :src="search" mode=""></image>
				<input placeholder="请搜索用户名称" v-model="searchVal" @input="changeInput"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

			</view>
			<liu-slide-img :list="listPoster" :autoplay="autoplay" :interval="interval"
				@click="clickSlideImg"></liu-slide-img>

			<view class="flex-between margin-top_40rpx margin-bottom_20rpx">
				<view class="flex-align-center">
					<view class=" line">

					</view>
					<view class="font-weight">
						最新推荐
					</view>
				</view>
				<view class="switchList flex-around" style="color: rgb(125, 93, 255);">
					<view :class="switchListIndex==index?'active-bg flex':'flex active-bgs' "
						v-for="(item,index) in switchList" :key="index" @click.stop="switchListFn(index)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<view class="flex-between">
				<view class="selectTime flex-align-center">

					<view class=" " style="margin-right: 20rpx;" v-for="(item, index) in tabs" :key="index">
						<view :class="[currentIndex == index ? 'active ' : 'active-a'] " @click="switchTimeTab(index)">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view style="color: #999999;font-size: 26rpx;z-index: 1000" @click="screenFn()">
					筛选
					<image class="screenCk" :src="screenCk" mode=""></image>
					<!-- <uni-icons color="#999" type="right" size="15"></uni-icons> -->
				</view>

			</view>
			<view class="" v-if="switchListIndex==0">
				<!-- <cc-pullScroolView class="pullScrollView" ref="pullScroll" :pullDown="pullDown"> -->
				

					<!-- 	<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
					@up="upCallback" :up="upOption" :down="downOption"> -->
					<view class="flex-wrap-justifyBetween">
						<view style="" class="recommendationList" v-for="(item,index) in list " :key="index"
							@click.stop="userInfoFn(item)">
							<view class="location">

								<image class="iconImg" :src="item.img?item.img:socialBackground" mode="aspectFill">
								</image>
								<!-- <view v-if="item.sex==2" class="genderBtn flex">
			
									<image class="genderImg" :src="path69" mode=""></image>
			
									<text >{{item.age}}</text>
								</view> -->

								<!-- <view v-if="item.sex==1" class="boyBtn flex">
									<image class="genderImg" :src="path25" mode=""></image>
			
			
									<text >{{item.age}}</text>
								</view> -->
								<!-- <view class="addressBtn flex">
									<image class="addressImg" :src="pathss" mode=""></image>
									<text style="margin-bottom: 6rpx;">{{item.city_name}}</text>
								</view> -->
								<!-- <view class="heightBtn ">
									<text>{{item.height}}cm</text>
								</view> -->
							</view>
							<view class="locationCard">
								<view class="font-overflow2" style="color: #666666;width: 100%;height: 80rpx;">
									{{item.introduce}}
								</view>
								<view class="flex-start-center" style="color: #666666;">
									<view v-if="item.sex==2" class=" ">
										<view class="genderBtn flex">

											<image class="genderImg" :src="path69" mode="widthFix"></image>


										</view>

									</view>
									<view v-if="item.sex==1" class=" ">
										<view class="boyBtn flex">
											<image class="genderImg" :src="path25" mode="widthFix"></image>


										</view>


									</view>
									<view class=" flex-wrap-flex-start-center "
										style="margin: 20rpx 0; margin-left: 10rpx;">
										<view class="flex " style="color: #999999;">
											<text>{{item.age}}岁</text>
										</view>
										<view class=" lines">

										</view>
										<view class="flex" style="color: #999999;">
											<text>{{item.height}}cm</text>
										</view>
										<view class=" lines">

										</view>
										<view class="flex" style="color: #999999;">
											<text>{{item.city_name?item.city_name:'无'}}</text>
										</view>


									</view>
									<view class="">

									</view>


								</view>
								<view class="flex-start-center margin-top_10rpx">
									<image class="avatar" :src="item.avatar" mode=""></image>
									<text>{{item.nickname}}</text>
								</view>
							</view>
						</view>


					</view>
			
				<!-- </cc-pullScroolView> -->
				<!-- </mescroll-body> -->
			<!-- 	<view style="height: 80rpx;" class="">

				</view> -->

			</view>
			<view class="" v-if="switchListIndex==1">
				<map style="width: 100%; height: 90vh;" :layer-style='5' :style="{height:mapheight}"
					:show-location='true' :latitude="form.dimension" :longitude="form.longitude" :markers="marker"
					:scale="scale" @markertap="markertap" @callouttap='callouttap'>

				</map>

			</view>
		</view>
			</scroll-list>

	</view>
</template>

<script>
	export default {
		props: ['formScreens', 'show', 'reachBottomSocial'],
		components: {

		},
		data() {
			return {

				daziBg1: this.$img.daziBg1,
				search: this.$img.search,
				dw: this.$img.dw,
				path25: this.$img.path25,
				path69: this.$img.path69,
				pathss: this.$img.pathss,
				socialBackground: this.$img.socialBackground,
				screenCk: this.$img.screenCk,
				tabs: [{
					name: '按最新',

				}, {
					name: '按关注'
				}],

				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				cIndex: 0,

				scale: 13, //缩放级别
				bottomData: false,
				marker: [],
				// marker: [{
				// 		id: 0,
				// 		latitude: 23.13065, //纬度
				// 		longitude: 113.3274, //经度
				// 		iconPath: 'https://n8.weijuyunke.com/2024-05-27/b47f4202405271749247903.png', //显示的图标        
				// 		rotate: 0, // 旋转度数
				// 		width: 20, //宽
				// 		height: 30, //高
				// 		//   title:'我在这里',//标注点名
				// 		alpha: 0.5, //透明度
				// 		callout: { //自定义标记点上方的气泡窗口 点击有效  
				// 			content: '天宝大厦', //文本
				// 			color: '#ffffff', //文字颜色
				// 			fontSize: 14, //文本大小
				// 			borderRadius: 15, //边框圆角
				// 			borderWidth: '10',
				// 			bgColor: '#e51860', //背景颜色
				// 			display: 'ALWAYS', //常显
				// 		},
				// 	},
				// 	{
				// 		id: 1234597,
				// 		latitude: 23.106574, //纬度
				// 		longitude: 113.324587, //经度
				// 		iconPath: 'https://n8.weijuyunke.com/2024-05-27/b47f4202405271749247903.png', //显示的图标        
				// 		rotate: 0, // 旋转度数
				// 		width: 20, //宽
				// 		height: 30, //高
				// 		//  title:'我在这里',//标注点名
				// 		alpha: 0.5, //透明度
				// 		//      label:{//为标记点旁边增加标签   //因背景颜色H5不支持
				// 		//   color:'red',//文本颜色
				// 		//      },
				// 		callout: { //自定义标记点上方的气泡窗口 点击有效  
				// 			content: '广州塔', //文本
				// 			color: '#ffffff', //文字颜色
				// 			fontSize: 14, //文本大小
				// 			borderRadius: 15, //边框圆角
				// 			borderWidth: '10',
				// 			bgColor: '#e51860', //背景颜色
				// 			display: 'ALWAYS', //常显
				// 		},
				// 	},
				// 	{
				// 		id: 2,
				// 		latitude: 23.1338, //纬度
				// 		longitude: 113.33052, //经度
				// 		iconPath: 'https://n8.weijuyunke.com/2024-05-27/b47f4202405271749247903.png', //显示的图标        
				// 		rotate: 0, // 旋转度数
				// 		width: 20, //宽
				// 		height: 30, //高
				// 		alpha: 0.5, //透明度
				// 		callout: { //自定义标记点上方的气泡窗口 点击有效  
				// 			content: '德隆大厦', //文本
				// 			color: '#ffffff', //文字颜色
				// 			fontSize: 14, //文本大小
				// 			borderRadius: 15, //边框圆角
				// 			borderWidth: '10',
				// 			bgColor: '#e51860', //背景颜色
				// 			display: 'ALWAYS', //常显
				// 		},
				// 	},
				// 	{
				// 		id: 3,
				// 		latitude: 23.136455, //纬度
				// 		longitude: 113.329002, //经度
				// 		iconPath: 'https://n8.weijuyunke.com/2024-05-27/b47f4202405271749247903.png', //显示的图标        
				// 		rotate: 0, // 旋转度数
				// 		width: 20, //宽
				// 		height: 30, //高
				// 		alpha: 0.5, //透明度
				// 		callout: { //自定义标记点上方的气泡窗口 点击有效  
				// 			content: '羊城国际商贸中心', //文本
				// 			color: '#ffffff', //文字颜色
				// 			fontSize: 14, //文本大小
				// 			borderRadius: 15, //边框圆角
				// 			borderWidth: '10',
				// 			bgColor: '#e51860', //背景颜色
				// 			display: 'ALWAYS', //常显
				// 		},
				// 	},
				// 	{
				// 		id: 4,
				// 		latitude: 23.224781, //纬度
				// 		longitude: 113.293911, //经度
				// 		iconPath: 'https://n8.weijuyunke.com/2024-05-27/b47f4202405271749247903.png', //显示的图标        
				// 		rotate: 0, // 旋转度数
				// 		width: 20, //宽
				// 		height: 30, //高
				// 		alpha: 0.5, //透明度
				// 		callout: { //自定义标记点上方的气泡窗口 点击有效  
				// 			content: '天瑞广场A座', //文本
				// 			color: '#ffffff', //文字颜色
				// 			fontSize: 16, //文本大小
				// 			borderRadius: 15, //边框圆角
				// 			borderWidth: '12',
				// 			bgColor: '#e51860', //背景颜色
				// 			display: 'ALWAYS', //常显
				// 		},
				// 	},
				// 	{
				// 		id: 5,
				// 		latitude: 23.072726, //纬度
				// 		longitude: 113.277921, //经度
				// 		iconPath: 'https://n8.weijuyunke.com/2024-05-27/b47f4202405271749247903.png', //显示的图标        
				// 		rotate: 0, // 旋转度数
				// 		width: 20, //宽
				// 		height: 30, //高
				// 		alpha: 0.5, //透明度
				// 		callout: { //自定义标记点上方的气泡窗口 点击有效  
				// 			content: '大米和小米儿童康复(广州盈丰)中心', //文本
				// 			color: '#ffffff', //文字颜色
				// 			fontSize: 14, //文本大小
				// 			borderRadius: 15, //边框圆角
				// 			borderWidth: '8',
				// 			bgColor: '#e51860', //背景颜色
				// 			display: 'ALWAYS', //常显
				// 		},
				// 	},
				// ],


				windowHeight: 0,
				switchListIndex: 0,
				autoplay: true,
				interval: 3000,
				listPoster: [],
				heightSystemss: 0,
				currentIndex: 0,
				list: [],
				tabList: [{
						name: '搭子',
						id: '1' //null
					}, {
						name: '圈子',
						id: '2' //null
					},

					{
						name: '服务',
						id: '3' //null
					},
					{
						name: '社交',
						id: '4' //null
					},
					{
						name: '关注',
						id: '5' //null
					},
					{
						name: '社群',
						id: '6' //null
					},

				],
				switchList: [{
					name: '列表'
				}, {
					name: '地图'
				}],
				form: {
					dimension: uni.getStorageSync("userInfo").dimension,
					longitude: uni.getStorageSync("userInfo").longitude,
					distance: 20000
				},
				formTest: {

				},
				userInfoObject: {},
				searchVal: '',
				fans: undefined,

				// 列表总数量
				totalNum: 600,
				//  页码 默认1开始
				curPageNum: 1,

				// 列表数组
				projectList: []

			}
		},

		// onLoad() {
		// 	this.createdgetSystemInfo()
		// 	this.init()

		// },
		created() {
			this.createdgetSystemInfo()
			this.init()
	
		},
		onShow() {
			
		},
		watch: {
			show: function(value) {

				this.$nextTick(() => {
					this.$refs.list.refresh();
				})

			},
			reachBottomSocial: function(value) {

				console.log('监听用户上拉加载1')
				// 数据全部加载完
				if (this.curPageNum * 10 >= this.totalNum) {

				} else {

					// // 显示加载中
					// this.$refs.pullScroll.showUpLoading();
					// this.curPageNum++;
					// this.requestData();
				}

			},

			formScreens: {
				handler(newValue, oldValue) {
					console.log('Object changed:', newValue);
					this.formTest = newValue
					this.currentIndex = -1
					this.$nextTick(() => {
						this.$refs.list.refresh();
					})

				},
				deep: true // 确保监听嵌套属性的变化
			},

		},

		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '90vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},

		methods: {
			// 上拉加载
			onReachBottom() {
				console.log('监听用户上拉加载1')
				// 数据全部加载完
				if (this.curPageNum * 10 >= this.totalNum) {

				} else {

					// 显示加载中
					// this.$refs.pullScroll.showUpLoading();
					// this.curPageNum++;
					// this.requestData();
				}

			},




			screenFn() {
				this.$emit('socialSortBol', true)
			},

			pageRefresh() {
				let myThis = this;
				this.$nextTick(() => {

					myThis.$refs.pullScroll.refresh();

				});
			},
			// 下拉刷新
			pullDown(pullScroll) {

				console.log('下拉刷新');
				this.list = [];
				this.curPageNum = 1;
				// setTimeout(() => {
				// 	this.requestData(pullScroll);
				// }, 300);

			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.userList,
					data: {
						page: scroll.num,
						limit: 10,
						name: this.searchVal,
						// id: this.userInfo.id,
						...this.formTest,
						fans: this.fans




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = this.list.concat(result.data.list).filter((item) => {
						return item.disable == 1
					});
					this.list.forEach((item) => {

						if (item?.img.includes(',')) {

							// 包含的进行slice(',') 分割

							item.img = item.img.split(',').map((item) => item
								.trim())[0];
						} else {
							if (item.img.length) {
								item.img = item.img
							} else {
								item.img = ''
							}


						}

					})
					uni.setStorageSync('socialList', this.list);

					// 		this.list.forEach((item) => {

					// 			item.labelList = item.label.split(",")
					// 		})



					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
			load(paging) {
				setTimeout(async () => {




					const result = await this.$http.post({
						url: this.$api.userList,
						data: {
							page: paging.page,
							limit: 10,
							name: this.searchVal,
							// id: this.userInfo.id,
							...this.formTest,
							fans: this.fans




						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {
						this.totalNum = result.data.count;

						if (paging.page == 1) this.list = [];

						this.list = this.list.concat(result.data.list).filter((item) => {
							return item.disable == 1
						});
						this.list.forEach((item) => {

							if (item?.img.includes(',')) {

								// 包含的进行slice(',') 分割

								item.img = item.img.split(',').map((item) => item
									.trim())[0];
							} else {
								if (item.img.length) {
									item.img = item.img
								} else {
									item.img = ''
								}


							}

						})
						uni.setStorageSync('socialList', this.list);

					} else {
						this.$sun.toast(result.message, 'none')
					}





					console.log(this.totalNum, this.list)

					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: this.totalNum
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 500);
			},
			refresh(paging) {
				
				setTimeout(async () => {
				
				
				
				
					const result = await this.$http.post({
						url: this.$api.userList,
						data: {
							page: paging.page,
							limit: 10,
							name: this.searchVal,
							// id: this.userInfo.id,
							...this.formTest,
							fans: this.fans
				
				
				
				
						},
						headers: {
							'Authorization': this.userInfo.token
						}
				
					})
				
				
					if (result.code == 0) {
						this.totalNum = result.data.count;
				
						if (paging.page == 1) this.list = [];
				
						this.list = this.list.concat(result.data.list).filter((item) => {
							return item.disable == 1
						});
						this.list.forEach((item) => {
				
							if (item?.img.includes(',')) {
				
								// 包含的进行slice(',') 分割
				
								item.img = item.img.split(',').map((item) => item
									.trim())[0];
							} else {
								if (item.img.length) {
									item.img = item.img
								} else {
									item.img = ''
								}
				
				
							}
				
						})
						uni.setStorageSync('socialList', this.list);
				
					} else {
						this.$sun.toast(result.message, 'none')
					}
				
				
				
				
				
					console.log(this.totalNum, this.list)
				
					// 刷新成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
					this.$refs.list.refreshSuccess({
						list: this.list,
						total: this.totalNum
					});
					// 刷新失败
					// this.$refs.list.refreshFail()
				}, 500);
			},

			requestData() {



				setTimeout(async () => {


					const result = await this.$http.post({
						url: this.$api.userList,
						data: {
							page: this.curPageNum,
							limit: 10,
							name: this.searchVal,
							// id: this.userInfo.id,
							...this.formTest,
							fans: this.fans




						},
						headers: {
							'Authorization': this.userInfo.token
						}

					})


					if (result.code == 0) {
						this.totalNum = result.data.count;

						if (this.curPageNum == 1) this.list = [];

						this.list = this.list.concat(result.data.list).filter((item) => {
							return item.disable == 1
						});
						this.list.forEach((item) => {

							if (item?.img.includes(',')) {

								// 包含的进行slice(',') 分割

								item.img = item.img.split(',').map((item) => item
									.trim())[0];
							} else {
								if (item.img.length) {
									item.img = item.img
								} else {
									item.img = ''
								}


							}

						})
						uni.setStorageSync('socialList', this.list);
						// 如果是最后一页
						if (this.curPageNum * 10 >= this.totalNum) {
							this.$refs.pullScroll.finish();

						} else {
							// 不是最后一页
							this.$refs.pullScroll.success();
						}
					} else {
						this.$sun.toast(result.message, 'none')
					}






				}, 100);

			},

			switchTimeTab(index) {

				console.log(index)
				this.currentIndex = index
				this.formTest = {}
				if (index == 1) {
					this.fans = 2
				} else {
					this.fans = undefined
				}
				this.$refs.list.refresh();

			},
			changeTab(index, id) {
				console.log('当前选中的项：' + index, id)


			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.$refs.list.refresh();
			},
			markertap(e) {
				console.log("===你点击了标记点===", e)
			},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)

				this.$sun.navGo('/pagesB/index/socialDetails', {
					uid: e.detail.markerId
				})
			},
			userInfoFn(item) {
				if (uni.getStorageSync('userInfo').token) {
					this.$sun.navGo('/pagesB/index/socialDetails', {
						uid: item.id
					})
				} else {
					this.$sun.navRe('/pages/Login/setUpChildLogin')
				}

			},

			// 点击轮播图
			clickSlideImg(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				}

			},
			// 获取轮播图
			async init() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 4

					},
					headers: {
						// 'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {




					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 4);
					console.log(this.listPoster)




				} else {

					this.$sun.toast(resPoster.messgae, 'none')
				}



			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			switchListFn(i) {
				console.log('测试')
				if (uni.getStorageSync('userInfo').token) {
					this.switchListIndex = i
					if (this.switchListIndex == 1) {
						this.userInfoFns()
					}
				} else {
					this.$sun.navRe('/pages/Login/setUpChildLogin')
				}


			},
			async userInfoFns() {
				const res = await this.$http.post({
					url: this.$api.userInfo,
					data: {



					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (res.code == 0) {

					this.userInfoObject = res.data


					this.form.dimension = this.userInfoObject.dimension
					this.form.longitude = this.userInfoObject.longitude
					// this.$sun.assignObject(this.form, {
					// 	...this.userInfoObject
					// })
					console.log(res.data)
					this.nearUser()

				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			async nearUser() {
				const resPoster = await this.$http.post({
					url: this.$api.nearUser,
					data: {

						...this.form

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {

					console.log(resPoster.data)
					this.marker = resPoster.data.list.map((item, index) => {
						return {
							id: item.id,
							latitude: item.dimension, //纬度
							longitude: item.longitude, //经度
							iconPath: item.avatar, //显示的图标        
							rotate: 0, // 旋转度数
							width: 50, //宽
							height: 50, //高
							//   title:'我在这里',//标注点名
							alpha: 0.5, //透明度
							callout: { //自定义标记点上方的气泡窗口 点击有效  
								content: item.nickname, //文本
								color: '#000000', //文字颜色
								fontSize: 14, //文本大小
								borderRadius: 15, //边框圆角
								borderWidth: '10',
								bgColor: '#ffffff', //背景颜色
								display: 'ALWAYS', //常显
							},
						}

					})


				} else {

					this.$sun.toast(resPoster.messgae, 'none')
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #ffffff;
	}

	.bgIndex {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));

		// height: 50vh;
		.map-container {
			position: relative;
			overflow: hidden;

			.cover-view {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 80rpx;
				height: 80rpx;
				color: #484848;
				background-color: #fff;
				background-size: 120rpx 120rpx;
				background-position: center center;
				position: absolute;
				bottom: 100rpx;
				right: 32rpx;
			}

			.cover-image {
				display: inline-block;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.screenCk {
			width: 23.96rpx;
			height: 24rpx;
		}

		.selectTime {

			margin: 20rpx 0;
            z-index: 1000;


			.active {


				padding: 10rpx 20rpx;
				border-radius: 100rpx;

				background: rgb(139, 96, 222);


				color: rgb(255, 255, 255);
				;
				text-align: center;


			}

			.active-a {


				padding: 10rpx 20rpx;
				border-radius: 100rpx;

				background: rgb(255, 255, 255);


				color: rgb(153, 153, 153);
				;
				text-align: center;

			}

			.orderStatus {
				width: 90px;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				font-weight: 700;

			}




		}

		.search-content {

			// justify-content: center;
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 30rpx;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

		.line {
			width: 10rpx;
			height: 30rpx;
			border-radius: 106rpx;
			margin-right: 10rpx;
			background: rgb(120, 93, 246);
		}

		.recommendationList {
			width: 352rpx;
			margin-bottom: 22rpx;

			.avatar {
				margin-right: 8rpx;
				width: 42rpx;
				height: 42rpx;
				border-radius: 50%;
			}

			.locationCard {
				padding: 16rpx;
				// height: 115px;
				min-height: 240rpx;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				background-color: #fff;

				.lines {
					width: 4rpx !important;
					height: 20rpx;
					margin: 0 10rpx;

					background: #D9D9D9;
				}

				.genderBtn {
					// position: absolute;
					// top: 10rpx;
					// left: 10rpx;
					width: 38rpx;
					height: 38rpx;
					padding: 0 10rpx;
					border-radius: 50%;
					color: rgb(255, 236, 242);
					background: rgb(246, 91, 203);
					;
					z-index: 999;

					.genderImg {
						// margin-right: 10rpx;
						vertical-align: middle;
						width: 15rpx;
						height: 15rpx;
					}

				}

				.boyBtn {
					// position: absolute;
					// top: 10rpx;
					// left: 10rpx;
					width: 38rpx;
					height: 38rpx;
					padding: 0 10rpx;
					border-radius: 100rpx;
					color: rgb(255, 236, 242);
					background: #51A9FF;
					z-index: 999;

					.genderImg {
						// margin-right: 10rpx;
						vertical-align: middle;
						width: 15rpx;
						height: 15rpx;
					}

				}

			}

			.location {
				position: relative;

				.heightBtn {
					position: absolute;
					right: 14rpx;
					bottom: 10rpx;
					padding: 0 10rpx;
					color: rgb(255, 236, 242);
					z-index: 999;
				}

				.genderBtn {
					position: absolute;
					top: 10rpx;
					left: 10rpx;
					height: 34rpx;
					padding: 0 10rpx;
					border-radius: 100rpx;
					color: rgb(255, 236, 242);
					background: rgb(246, 91, 203);
					;
					z-index: 999;

					.genderImg {
						margin-right: 10rpx;
						vertical-align: middle;
						width: 18rpx;
						height: 18rpx;
					}

				}

				.boyBtn {
					position: absolute;
					top: 10rpx;
					left: 10rpx;
					height: 34rpx;
					padding: 0 10rpx;
					border-radius: 100rpx;
					color: rgb(255, 236, 242);
					background: #51A9FF;
					z-index: 999;

					.genderImg {
						margin-right: 10rpx;
						vertical-align: middle;
						width: 18rpx;
						height: 18rpx;
					}

				}

				.addressBtn {
					position: absolute;

					left: 10rpx;
					bottom: 10rpx;
					height: 34rpx;
					padding: 0 10rpx;
					border-radius: 100rpx;
					color: rgb(255, 236, 242);

					z-index: 999;

					.addressImg {
						margin-right: 10rpx;
						vertical-align: middle;
						width: 18rpx;
						height: 22rpx;
					}

				}

				.iconImg {
					width: 100%;
					height: 480rpx;
					display: block;
				}

			}

		}


		.switchList {
			width: 166rpx;
			height: 60rpx;
			border-radius: 192rpx;
			padding: 5rpx;
			background: rgb(239, 239, 239);
			z-index: 1000;

			.active-bg {
				width: 83rpx;
				height: 50rpx;
				border-radius: 192rpx;

				background: rgb(255, 255, 255);
			}

			.active-bgs {
				width: 83rpx;
				height: 50rpx;
				border-radius: 192rpx;

				background: rgb(239, 239, 239);
			}
		}
	}
</style>